<template>
  <div class="APP">
    <button @click="isShow">显示/隐藏</button>
    <transition name="why">
      <div v-if="show">Hello World</div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    isShow () {
      this.show = !this.show
    }
  }
}
</script>
<style scoped>
.why-enter-from,
.why-leave-to {
  opacity: 0;
}
.why-enter-to,
.why-leave-from {
  opacity: 1;
}
.why-enter-active,
.why-leave-active
 {
   transition: all 2s ease;
 }
</style>
